import React, {Component} from 'react';
import PropTypes from 'prop-types';
import TodoButton from '../TodoButton/index.jsx';


class TodoList extends Component {

  constructor(props) {
    super(props);
    this._checkboxChange = this._checkboxChange.bind(this);
    this._delete = this._delete.bind(this);
    this._editor = this._editor.bind(this);
  }

  static propTypes = {
    id: PropTypes.number.isRequired,
    text: PropTypes.string.isRequired,
    checked: PropTypes.bool.isRequired,
    _onDeleteClick: PropTypes.func.isRequired,
    _onEditorClick: PropTypes.func.isRequired,
    _stateChangeClick: PropTypes.func.isRequired
  }

  static defaultProps = {

  }

  _delete() {
    const {
      _onDeleteClick,
      id
    } = this.props;
    _onDeleteClick(id);
  }

  _editor() {
    const {
      _onEditorClick,
      id
    } = this.props;
    let name = prompt('请输入内容', this.props.text);

    if (name != '' && name != null && name != this.props.text) {
      _onEditorClick(id, name);
    }
  }

  _checkboxChange() {
    const {
      _stateChangeClick,
      id
    } = this.props;
    _stateChangeClick(id);
  }

  render() {
    const {
      id,
      text,
      checked
    } = this.props;

    return (
      <div style = {{display: 'flex'}}>
        <input
          name = {id}
          type = "checkbox"
          checked = {checked}
          onChange = {this._checkboxChange}/>
        {text}
        <TodoButton
          _onClick={this._delete}
          name = 'delete'/>
        <TodoButton
          _onClick={this._editor}
          name = 'editor'/>
      </div>
    );
  }
}


export default TodoList;